<template>
	<div>
		<navigationBar :backType="2" navigationTitle="地址列表" />

		<view class="wrap paddingBottom">
			<view class="wrap-list">
				<block v-for="(item, index) in list" :key="index">
					<view class="item">
						<view class="top flex align-center">
							<view class="avatar f-32">
								{{ $filters.getFirstLetter(item.name) }}
							</view>

							<view class="right">
								<view class="nickname-mobile flex align-base">
									<view class="nickname fb-32 limit-num-line">
										{{ item.name }}
									</view>

									<view class="mobile f-24">
										{{ item.mobile }}
									</view>
								</view>

								<view class="address f-26 limit-num-line">
									{{ item.address }}
									{{ item.community_name }} {{ item.area }}
								</view>
							</view>
						</view>

						<view class="line"></view>

						<view class="bottom flex align-center just-end">
							<view
								class="choose-bg flex align-center"
								v-if="from === 'order'"
								@click="onChoose(item)"
							>
								<image
									:src="
										getImageURL(
											'technician/choose/choose_normal.png'
										)
									"
								/>
								<view class="f-28"> 点击选择 </view>
							</view>

							<view
								class="edit-bg flex align-center f-24"
								@click="onEdit(item)"
							>
								<image
									class="img"
									:src="
										getImageURL(
											'technician/mine/address_edit.png'
										)
									"
								/>
								<view class="text"> 编辑 </view>
							</view>

							<view
								class="delete-bg flex align-center f-24"
								@click="onDelete(item)"
							>
								<image
									class="img"
									:src="
										getImageURL(
											'technician/mine/address_delete.png'
										)
									"
								/>
								<view class="text"> 删除 </view>
							</view>
						</view>

						<view
							class="default-bg f-24"
							v-if="item.is_default == 1"
						>
							默认地址
						</view>
					</view>
				</block>
			</view>

			<uEmpty v-if="list.length === 0" />
		</view>

		<wrapFooter :btnTitle="'添加新的地址'" @onClick="onAdd" />
	</div>
</template>

<script>
	import { addressList, deleteAddress } from "@/API/API/mine.js";

	export default {
		data() {
			return {
				from: "",
				order_address_id: "",
				list: [],
			};
		},
		onLoad(options) {
			if (options.from) {
				this.from = options.from;
				this.order_address_id = options.address_id;
			}
		},
		onShow() {
			this.getData();
		},
		methods: {
			/**
			 * 选择
			 */
			onChoose(item) {
				uni.$emit("changeAddress", item);
				uni.navigateBack();
			},
			/**
			 * 删除地址
			 */
			onDelete(item) {
				uni.showModal({
					title: "删除地址",
					content: "确定要删除该地址吗？",
					success: (res) => {
						if (res.confirm) {
							this.deleteAddressData(item.id);
						}
					},
				});
			},
			/**
			 * 删除接口
			 */
			deleteAddressData(address_id) {
				deleteAddress(address_id).then((res) => {
					if (address_id == this.order_address_id) {
						uni.$emit("defaultAddressDelete");
					}
					this.$st.show(res.msg);
					this.getData();
				});
			},
			/**
			 * 编辑
			 */
			onEdit(item) {
				uni.navigateTo({
					url: `/subPages/technician/mine/addEditAddress?address_id=${item.id}`,
				});
			},
			/**
			 * 添加收货地址
			 */
			onAdd() {
				uni.navigateTo({
					url: `/subPages/technician/mine/addEditAddress`,
				});
			},
			/**
			 * 网络请求
			 */
			getData() {
				addressList().then((res) => {
					this.list = res.data;
					if (
						this.list.length === 0 &&
						this.order_address_id !== ""
					) {
						uni.$emit("defaultAddressDelete");
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		--bottom-height: 140rpx;

		.wrap-list {
			padding: 20rpx;
			overflow: hidden;
			width: 100%;
			box-sizing: border-box;

			.item {
				width: 100%;
				background-color: white;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				padding: 30rpx;
				box-sizing: border-box;
				position: relative;
				z-index: 1;

				&:last-child {
					margin-bottom: 0;
				}
				.top {
					width: 100%;
					padding: 0 10rpx;
					box-sizing: border-box;
					overflow: hidden;

					.avatar {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						overflow: hidden;
						line-height: 90rpx;
						text-align: center;
						background-color: $theme-color;
						color: $bg-text-color;
					}

					.right {
						--limit-num: 1;
						margin-left: 18rpx;
						flex: 1;
						overflow: hidden;

						.nickname-mobile {
							width: 100%;
							overflow: hidden;

							.nickname {
								color: $title-color;
							}
							.mobile {
								margin-left: 18rpx;
								color: #b0b0b0;
							}
						}

						.address {
							margin-top: 18rpx;
							color: $title-color;
						}
					}
				}

				.line {
					margin-top: 24rpx;
					width: 100%;
					height: 2rpx;
					background-color: #ececec;
				}

				.bottom {
					margin-top: 30rpx;
					width: 100%;
					overflow: hidden;

					.delete-bg {
						margin-left: 40rpx;
					}

					.img {
						width: 28rpx;
						height: 28rpx;
					}

					.text {
						margin-left: 12rpx;
						color: #b0b0b0;
					}

					.choose-bg {
						margin-right: 20rpx;
						flex: 1;
						overflow: hidden;

						> image {
							width: 30rpx;
							height: 30rpx;
						}
						> view {
							margin-left: 8rpx;
							color: #b0b0b0;
						}
					}
				}

				.default-bg {
					position: absolute;
					right: 0;
					top: 0;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					padding: 0rpx 20rpx;
					z-index: 2;
					background-color: $theme-color;
					color: $bg-text-color;
					border-top-right-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
					overflow: hidden;
				}
			}
		}
	}
</style>
